import React, { useEffect, useState } from 'react';
import { Form, Input, InputNumber, Radio } from 'antd';

import ProBox from "vendor/components/pro-box";
import { WrappedComponentProps } from "vendor/components/pro-hoc/withModal";
import { getEnv } from "@/constants";

import { RespDataType, createDept, updateDept } from '../../../api';

interface DataAuthProps extends WrappedComponentProps {
  deptId?: number;
  optType: "add" | "edit";
  fetchList: () => void;
  editData?: RespDataType.DeptItem,
}

const CreateOrEdit: React.FC<DataAuthProps> = ({ modalControl, optType, deptId, fetchList, editData }) => {
  const { commonStatus, commonStatusList } = getEnv().globalConfig;
  const [form] = Form.useForm();
  const [loading] = useState(false);
  const [deptInfo] = useState<RespDataType.DeptItem>();

  const isEditMode = optType == "edit";

  useEffect(() => {
    modalControl.registerOk(handleSubmit);
  });

  // useEffect(() => {
  //   if (isEditMode) {
  //     setLoading(true);
  //     getOrgDetail(deptId.toString()).then((resp) => {
  //       // setDeptInfo(resp.data);
  //       setLoading(false);
  //     })
  //   } else {
  //     setLoading(false);
  //   }
  // }, [])

  const handleSubmit = () => {
    form.validateFields().then((values) => {
      const success = () => {
        fetchList();
        modalControl.close()
      }
      const error = () => modalControl.hideSaving();

      if (isEditMode) {
        values.deptId = deptId;
        values.parentId = editData.parentId;
        updateDept(values).then(success).catch(error)
      } else {
        values.parentId = deptId ? deptId : 0;
        createDept(values).then(success).catch(error)
      }
    }).catch(() => modalControl.hideSaving())
  }

  return <ProBox loading={loading}>
    <Form
      form={form}
      initialValues={{
        orderNum: 1,
        status: commonStatus.normal,
        ...(editData || {}),
        // ...(deptInfo ? {geo: deptInfo.geo} : {}),
        ...(deptInfo || {}),
      }}
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 18 }}
    >
      <Form.Item
        label="组织名称"
        name="deptName"
        rules={[{ required: true, message: '组织名称不能为空' }]}
      >
        <Input placeholder="请输入组织名称" />
      </Form.Item>

      <Form.Item
        label="状态"
        name="status"
        rules={[{ required: true, message: '状态不能为空' }]}
      >
        <Radio.Group options={commonStatusList} />
      </Form.Item>

      <Form.Item
        label="序号"
        name="orderNum"
        rules={[{ required: true, message: '序号不能为空' }]}
      >
        <InputNumber placeholder="请输入序号" min={1} />
      </Form.Item>

      <Form.Item
        label="负责人"
        name="leader"
      >
        <Input placeholder="请输入负责人" />
      </Form.Item>

      <Form.Item
        label="手机号"
        name="phone"
      >
        <Input placeholder="请输入手机号" />
      </Form.Item>

      <Form.Item
        label="邮箱"
        name="email"
      >
        <Input placeholder="请输入邮箱" />
      </Form.Item>

      

      
    </Form>
  </ProBox>
}

export default CreateOrEdit;

